<template>
  <div>
    <ylheader @send='confirmactivity' :leftsvg="true" :title="'活动报名'" :righttext="true" :righttexts="'确定'"></ylheader>
    <!--选择弹出框-->
    <div v-for="(valueitem,m) in activitylist" :key="m" >
      <mt-popup
        v-model="valueitem.isvalueshow" position="bottom"  >
        <div style="width: 7.5rem" >
          <div class="sexdiv" v-for="(tempitem,tempindex) in valueitem.valuearray" :key="tempindex" @click="chooseitemvalue(tempitem,m,valueitem)">
            <span >{{tempitem}}</span>
            <div style="width: 6.9rem;height: 1px;background-color: #E6E6E6;margin-left: 0.3rem"></div>
          </div>
        </div>
      </mt-popup> 
    </div>
    <div >
      <div >
        <div v-for="(items,index) in activityinfolist" :key="index" style="margin-bottom:0.2rem">
          <table class = "tablespecial">
            <tr v-if="activityobj.isName=='0'"> <!-- 姓名 -->
              <td>
                <div class = "commonrow nameborder" >
                    <span class = "commonleftblank namemiddleborder" >
                      姓名
                    </span>
                  <div class = "textoutdivstyle" style="border-left:1px #d2d2d2 solid;height:0.85rem;width:5rem">
                    <input placeholder="请输入姓名" class ="textinputstyle" type="text"  v-model="items.name"/>
                  </div>
                </div>
                 <div class="body-sep"></div>
              </td>
            </tr>
            <tr v-if="activityobj.isSex=='0'">
              <td>
                <div class = "commonrow" style="margin: 0 0.3rem">
                  <span class = "commonleftblank namemiddleborder" >性别</span>
                  <span class = "commonleftblank sexborder" :class="{sexselected: items.showsex == sexoption}"
                  @click="selectsex(items,sexoption)" v-for="(sexoption,index) in sexoptions" :key="index"> {{sexoption}}</span>
                </div>
              </td>
            </tr>
            <tr v-if="activityobj.isMoblie=='0'"> <!--手机号 -->
              <td>
              <div class = "commonrow nameborder" style="margin-top:0" >
                  <span class = "commonleftblank namemiddleborder" >
                  手机号
                  </span>
                <div class = "textoutdivstyle" style="border-left:1px #d2d2d2 solid;height:0.85rem;width:5rem">
                  <input placeholder="请输入手机号" class ="textinputstyle" type="text" v-model="items.mobile" maxlength="11" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')" />
                </div>
              </div>
              <div class="body-sep"></div>
              </td>
            </tr>
            <tr v-if="activityobj.isIDCard=='0'"> <!-- 身份证号 -->
              <td>
                <div class = "commonrow  phoneborder"  style="margin-top:-0.02rem">
                  <span class = "commonleftblank namemiddleborder" style="margin-left:0.18rem">
                    身份证号
                  </span>
                  <div class = "textoutdivstyle" style="border-left:1px #d2d2d2 solid;height:0.85rem;width:5rem">
                    <input placeholder="请输入身份证号" v-model="items.idCard" id="addressphone"  class ="textinputstyle seporatebackgroundone" type="text" name="sctel" />
                  </div>
                </div>
              </td>
            </tr>
              <tr> 
                <td>
                  <div v-for="(item,i) in activitylist" :key="i">
                    <!--type 0文本框  1下拉表单-->
                    <div v-if="item.type==0" >
                      <div v-if="items.customValueArray&&item.key">
                        <div class = "commonrow seporatebackgroundtwo" style="margin:0 0.3rem;height:0.5rem;line-height:0.6rem;" >
                            <span class = "commonleftblank" style="margin-left:0.2rem">
                               {{item.key}}
                            </span>
                        </div>
                        <div class = "commonrow seporatebackgroundtwo" style="margin:0 0.3rem 0 0.3rem;height:0.72rem;line-height:0.28rem;padding-top:0.02rem;" >
                          <span >
                              <input id="addressarea" @change="changevaluedata" class ="textinputstyle" v-model="items.customValueArray[i]"  type="text" style="border:1px solid #d2d2d2;border-radius:4px;height:0.62rem;line-height:0.28rem;padding-top:0.1rem" />
                          </span>
                        </div>
                      </div>
                    </div>
                    <div v-if="item.type==1">
                       <div v-if="items.customValueArray&&item.key">
                          <div class = "commonrow " style="height:0.55rem;line-height:0.65rem">
                              <span class = "commonleftblank" style="margin-left:0.5rem">
                                   {{item.key}}
                              </span>
                          </div>
                            <div class = "commonrow " style="display:flex;margin:0 0.3rem 0 0.3rem;height:0.72rem;line-height:0.28rem" @click="choosevalue(item,index)"  >
                              <div style="padding-left:0.2rem;flex:15;background:#f5f5f5;line-height:0.72rem">{{items.customValueArray[i]}}</div>
                              <div class="yl-2r" style="flex:1;line-height:0.78rem;background:#f5f5f5"></div>
                            </div>
                        </div>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class = "commonrow seporatebackgroundtwo" style="margin:0 0.3rem;height:0.5rem;line-height:0.6rem">
                        <span class = "commonleftblank" style="margin-left:0.2rem">
                            备注
                        </span>
                    </div>
                    <div class = "commonrow seporatebackgroundtwo" style="margin:0 0.3rem 0 0.3rem;height:1.41rem;padding-top:0.02rem;margin-bottom:0.2rem">
                          <textarea id="addressarea" v-model="items.remark" class ="textinputstyle" type="text" style="border-radius:4px;background:#f5f5f5;height:1.39rem;padding-top:0.1rem;line-height:0.3rem" />
                    </div>
                </td>
              </tr>
            <div class="submitall" v-if="index==(activityinfolist.length-1)">
              <input name="input1" type="submit" value="添加报名人员" class="submitactivity" style="border:none" @click="addactivity" />
              <input v-if="index>0" name="input2" type="submit" value="删除" class="submitactivity" style="border:none;background:#bebebe;" @click="deleteactivity(index)" />
            </div>
          </table>
        </div>
         <p style="padding-bottom:20px;"></p>
      </div>
    </div>
  </div>
</template>
<script>
import ylheader from "src/components/yl-header.vue";
import api from "src/api/index";
export default {
  name:"newenrollment",
  data() {
    return {
      sexoptions: ["男", "女"],
      activeName: "女",
      activitylist: [], //报名选项
      activityinfolist: [{
        "activityId":this.$route.query.activeId,
        "customValue":"",
        "id":"",
        "idCard":"",
        "mobile":"",
        "name":"",
        "numberId":null,
        "numberName":null,
        "remark":"",
        "sex":0,
        "showsex":"男",
        "customId":this.customId,
        "customValueArray":[]
      }], //已报名消息
      tempactivityinfolist:[],
      activityobj: {}, //是否显示
      customId: "", //自定义配置id，按照从小到大排序，用","分隔
      canjoin: false, //避免双击
      isinfocomplete: true, //判断信息是否填完
      choosevaluearray:[],//弹出框选项值
      infoindex:"",//自定义选择框索引值
    };
  },
  components: {
    ylheader
  },
  methods: {
    confirmactivity() {
      this.deletejsonarrary() 
      .then(data => {
        if (this.isinfocomplete == false) {
          this.$toast("请完善您的报名信息");
          this.isinfocomplete = true;
        }else{
          this.querytopicjoinactive().then(data=>{
              this.gosignup();
           });
        }
      })
    },
    //重组json值
    deletejsonarrary(){
      let p = new Promise((resolve, reject) => {
          if (this.canjoin) {
              return;
          }
          this.canjoin = true;
          var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
          var that = this;
          _each(that.activityinfolist, (v, i) => {
            if (that.activityobj.isName=='0'&&v.name.replace(/\s+/g,"") == "") {
              that.isinfocomplete = false;
            }
            if (that.activityobj.isMoblie=='0'&&v.mobile.replace(/\s+/g,"") == ""&&!reg.test(v.mobile)) {
              that.isinfocomplete = false;
            }
            if (that.activityobj.isIDCard=='0'&&v.idCard.replace(/\s+/g,"") == "") {
              that.isinfocomplete = false;
            }
            if(that.activitylist&&that.activityinfolist[i].customValueArray&&that.activityinfolist[i].customValueArray.length>0){
              _each(that.activityinfolist[i].customValueArray, (m, j) => {
                  if(m==""){
                    that.isinfocomplete = false;  
                  }
                  if(typeof(m)=="undefined"){
                    that.isinfocomplete = false;  
                  }
                  if(that.activitylist&&that.activityinfolist[i].customValueArray.length!=that.activitylist.length){
                    that.isinfocomplete = false;  
                  }
              })
            }else if(that.activitylist&&that.activitylist.length!=0&&that.activityinfolist[i].customValueArray.length==0){
                that.isinfocomplete = false;  
            }
          });
          resolve("删除信息...");
      })
      return p;
    },
    
    //请求报名接口
    querytopicjoinactive(){
        var that = this;
        let p = new Promise((resolve, reject) => {
          _each(that.activityinfolist, (v, i) => {
            if(v.customValueArray){
                 delete v.customValueArray;
            }
          })
          resolve("重组.......");
        })
        return p;
    },
    gosignup(){
       const data = {
        json: JSON.stringify(this.activityinfolist),
        flag: 1
      };
      api.Querytopicjoinactive(data).then(res => {
        if (res.success) {
          this.$toast("报名成功");
          this.$router.go(-1);
        }else{
          _each(this.activityinfolist, (v, i) => {
            v.customValueArray = v.customValue.split("|^|");
          });
          this.$toast(res.msg);
        }
      });

    },
    //更新选中值
    changevaluedata() {
      _each(this.activityinfolist, (v, i) => {
        v.customValue = v.customValueArray.join("|^|");
      });
    },
    chooseitemvalue(tempitem, i, item) {
      this.activityinfolist[this.infoindex].customValueArray[i] = tempitem;
      item.isvalueshow = false;
      this.changevaluedata();
    },
    choosevalue(data,index) {
      document.activeElement.blur();
      data.isvalueshow = true;
      this.infoindex = index;
    },
    selectsex(items,sexoption) {
      items.showsex = sexoption;
      if(items.showsex=="男"){
          items.sex="0"
      }else if(items.showsex=="女"){
          items.sex="1"
      }
      // this.activeName = sexoption;
    },
    gettopiclookactive() {
      let p = new Promise((resolve, reject) => {
        const activeparams = {
          id: this.$route.query.activeId
        };
        api.Querytopiclookactive(activeparams).then(res => {
          if (res.success) {
            this.activityobj = res.data.activity;
            _each(res.data.activityCustoms, (v, i) => {
              v.isvalueshow = false;
              this.customId += v.id + ",";
              if (v.type == 1) {
                v.valuearray = res.data.activityCustoms[i].value.split("|");
              }
            });
            this.customId = this.customId.substring(
              0,
              this.customId.length - 1
            );
            if (res.info.length > 0) {
              _each(res.info, (v, i) => {
                if(res.info[i].customValue!=""){
                  v.customValueArray = res.info[i].customValue.split("|^|");
                  console.log(v.customValueArray)
                }
                v.customId = this.customId;
              });
              this.activityinfolist = res.info;
            }else if(res.info.length==0){
              this.activityinfolist[0].customId = this.customId;
            }
            this.activitylist = res.data.activityCustoms;
          
          }
          resolve("获取活跃数据...");
        });
      });
      return p;
    },
    addactivity() {
     let tempinfor = {
        "activityId":this.$route.query.activeId,
        "customValue":"",
        "id":"",
        "idCard":"",
        "mobile":"",
        "name":"",
        "numberId":null,
        "numberName":null,
        "remark":"",
        "sex":0,
        "showsex":"男",
        "type":"0",
        "customId":this.customId,
        "customValueArray":[],
      };
      this.activityinfolist.push(tempinfor);
    },
    deleteactivity(data) {
      this.activityinfolist.splice(data, 1);
    }
  },
  mounted() {
    this.gettopiclookactive();
  }
};
</script>
<style scoped>
input[type="text"] {
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border: 1px solid transparent;
}

/*表样式*/
.tablespecial {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  cellpadding: 0;
}
.tablespecial tr {
  background: #fff;
}
.commonrow {
  height: 0.86rem;
  line-height: 0.9rem;
  background: #ffffff;
}
.nameborder {
  border-left: 1px #d2d2d2 solid;
  border-right: 1px #d2d2d2 solid;
  border-top: 1px #d2d2d2 solid;
  margin: 0.29rem 0.3rem 0 0.3rem;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.commonleftblank {
  display: inline-block;
  font-size: 0.28rem;
}
.namemiddleborder {
  margin-left: 0.2rem;
  width: 1.54rem;
}
/*输入框样式*/
.textoutdivstyle {
  display: inline-block;
  float: left;
  left: 2.113333rem;
  position: absolute;
}
.sexborder {
  border: 2px solid #d2d2d2;
  border-radius: 4px;
  text-align: center;
  width: 1.2rem;
  height: 0.54rem;
  line-height: 0.54rem;
  margin-right: 0.3rem;
}
.sexselected {
  border: 2px solid #fb685b;
}
.phoneborder {
  /* border: 1px solid #d2d2d2; */
  border-left: 1px #d2d2d2 solid;
  border-right: 1px #d2d2d2 solid;
  border-bottom: 1px #d2d2d2 solid;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin: 0 0.3rem;
}
.textinputstyle {
  height: 0.66rem;
  margin-left: 3.813333rem;
  margin: 0px;
  padding: 0px;
  padding-left: 0.2rem;
  width: 100%;
  font-size: 0.28rem;
  border: none;
  outline: none;
}
.submitall {
  background: #f5f5f5;
  margin-top: 0.3rem;
  text-align: center;
  height: 100%;
  -webkit-appearance: none;
}
.submitactivity {
  font-size: 0.3rem;
  width: 3.3rem;
  height: 0.84rem;
  background: #fb685b;
  border-radius: 2px;
  color: #fff;
  -webkit-appearance: none;
}
.sexdiv {
  height: 0.9rem;
  text-align: center;
  line-height: 0.9rem;
  font-size: 0.32rem;
  color: #494949;
  font-family: "PingFangSC Regular";
}
.delete {
  height: 0.9rem;
  line-height: 0.9rem;
  font-size: 0.3rem;
  color: #333333;
  font-family: "PingFangSC Regular";
  width: 100%;
  text-align: center;
}
.cancle {
  height: 0.9rem;
  width: 100%;
  text-align: center;
  line-height: 0.9rem;
  font-size: 0.3rem;
  color: #de4b4e;
  font-family: "PingFangSC Regular";
}
.body-sep {
  margin: 0 0.3rem;
  height: 1px;
  background-color: #d2d2d2;
}
</style>
